import React, {Fragment, PureComponent} from 'react';
import { Link } from 'react-router-dom';
import {
  ListWrapper,
  ListInner,
  ListItem,
  Content,
  ContentPic,
  ContentTitle,
  ContentInfo,
  ContentSpan
} from '../style'

class Topping extends PureComponent{
  render() {
    const { homeList } = this.props;
    return (
     <Fragment>
       <ListWrapper>

         {
           homeList.map(item => {
             return (
               <Link to={ '/detail/' + item.articlePid} className='link' key={item.articlePid} >
                 <ListInner>
                   <ListItem>
                     <Content>
                       <ContentTitle>{item.title}</ContentTitle>
                       <ContentInfo>
                         <ContentSpan className='source'>{item.author}</ContentSpan>
                         <ContentSpan className='num'>{item.viewNum}阅读</ContentSpan>
                         <ContentSpan className='time'>{item.publish_time}</ContentSpan>
                       </ContentInfo>
                     </Content>
                     <ContentPic>
                       <img alt='文字配图' width='120' height='80' src={item.picUrl} />
                     </ContentPic>
                   </ListItem>
                 </ListInner>
               </Link>
             )
           })
         }
       </ListWrapper>
     </Fragment>
    )
  }
}

export default Topping;